<template>
  <el-button 
    :type="type || themeType"
    :loading="loading"
    @click="$emit('click')"
    class="confirm-button"
  >
    {{text}}
  </el-button>
</template>

<script setup>
import { useTheme } from '@/hooks/useTheme'
import { computed, onMounted } from 'vue'

// 使用主题组合API获取当前主题按钮类型
const { themeType } = useTheme()

const props = defineProps({
  // 按钮类型
  type: {
    type: String,
    default: 'primary'
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  },
  // 按钮文本
  text: {
    type: String,
    default: '确定'
  }
})

// 组件挂载时记录props
onMounted(() => {
  console.log('ConfirmButton props:', {
    text: props.text,
    type: props.type,
    loading: props.loading
  })
})

defineEmits(['click'])
</script>

<style lang="scss" scoped>
.confirm-button {
  min-width: 100px;
  margin: 0 10px;
  color: #ffffff !important;
}
</style> 